<template>
    <el-tooltip
        :visible="visible"
        effect="dark"
    >
        <div
        class="custom-tooltip-icon"
        @mouseenter="handleVisible"
        @mouseleave="handleHide"
        @click.stop.prevent="triggerClick"
        >
            <slot><svg-icon :name="icon" /></slot>
        </div>
    </el-tooltip>
</template>

<script lang="ts" setup>
/**
 * 带提示的svg按钮
 * 支持el-tooltip的所有属性
 * @prop icon svg按钮名称
 */
import { ref, useAttrs, onBeforeUnmount } from 'vue'

defineProps({
    icon: {
        type: String,
        default: ''
    }
})

const attrs = useAttrs()
const visible = ref(false)
const timer = ref(null)

const handleVisible = () => {
    if (!attrs.content) return false
    timer.value = setInterval(() => {
        visible.value = true
    }, 1000)
}

const handleHide = () => {
    clearInterval(timer.value)
    timer.value = null
    visible.value = false
}

const emit = defineEmits(['click'])
const triggerClick = (data: any) => {
    handleHide()
    emit('click', data)
}

onBeforeUnmount(() => {
    handleHide()
})

</script>

<style lang="scss" scoped>
.svg-icon {
    outline: none !important;
}
.custom-tooltip-icon {
    display: inline-block;
}
</style>